<!DOCTYPE html>
<html>
<style>
    .box {
        border: solid 1px #ccc;
        border-radius: 6px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        background-color: #f6f6f6;
        padding: 10px;
    }
</style>
<head lang="en">
    <meta charset="UTF-8">
    <title>计算太阳方位角/高度角</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.js"></script>
    <script src="main.js"></script>

    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap-theme.css" rel="stylesheet">
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <h1 class="text-center">NOAA Solar Calculator</h1>
    <h4 class="text-center">Find Sunrise, Sunset, Solar Noon and Solar Position for Any Place on Earth</h4>
    <div class="row">
        <!-- location box -->
        <div class="col-sm-6">
            位置：
        <div class="box">
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="latbox"><a >纬度： </a></label>
                        <input type="text" class="form-control" id="latbox">
                    </div>
                </div>

                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="lngbox"><a >经度： </a></label>
                        <input type="text" class="form-control" id="lngbox">
                    </div>
                </div>

                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="zonebox"><a >时区： </a></label>
                        <input type="text" class="form-control" id="zonebox">
                        <input type="checkbox" id="dstCheckbox" name="dst">
                        <a>DST？</a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="inputZeroAzimuth">零方位角</label>
                        <select name="inputZeroAzimuth" id="inputZeroAzimuth" class="form-control">
                            <option value="0" selected="">北</option>
                            <option value="180">南</option>
                        </select>
                    </div>
                </div>
            </div>
            <button type="submit" class="btn btn-default text-center" id="mkCookie" name="mkCookie">保存位置</button>
        </div>  <!-- end box -->
        </div>  <!-- end col-sm-6-->

        <div class="col-sm-6">

            日期：
        <div class="box">
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="yearbox">年： </label>
                        <input type="text" id="yearbox" name="year" class="form-control">
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="mosbox">月： </label>
                        <select name="mos" id="mosbox" class="form-control">
                            <option>一月</option>
                            <option>二月</option>
                            <option>三月</option>
                            <option>四月</option>
                            <option>五月</option>
                            <option>六月</option>
                            <option>七月</option>
                            <option>八月</option>
                            <option>九月</option>
                            <option>十月</option>
                            <option>十一月</option>
                            <option>十二月</option>
                        </select>
                    </div>
                </div>
                <!-- row with date, month, year -->
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="daybox">日： </label>
                        <select name="day" id="daybox" class="form-control">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                            <option>6</option>
                            <option>7</option>
                            <option>8</option>
                            <option>9</option>
                            <option>10</option>
                            <option>11</option>
                            <option>12</option>
                            <option>13</option>
                            <option>14</option>
                            <option>15</option>
                            <option>16</option>
                            <option>17</option>
                            <option>18</option>
                            <option>19</option>
                            <option>20</option>
                            <option>21</option>
                            <option>22</option>
                            <option>23</option>
                            <option>24</option>
                            <option>25</option>
                            <option>26</option>
                            <option>27</option>
                            <option>28</option>
                            <option>29</option>
                            <option>30</option>
                            <option>31</option>
                        </select>
                    </div>
                </div>


            </div> <!-- end row -->

            <div class="row">  <!-- row with hour, minute, second -->
                <div class="col-sm-12">
                    <div class="form-group" style="margin-bottom: 2px;">
                        <label for="yearbox">当地时间： </label>
                        <div class="form-inline">
                            <input type="text" id="hrbox" name="hour"  class="form-control" style="width: 50px;">：
                            <input type="text" id="mnbox" name="mins"  class="form-control" style="width: 50px;">：
                            <input type="text" id="scbox" name="secs"  class="form-control" style="width: 50px;">
                            <label style="margin-right: 2em;"> <input type="checkbox" id="pmbox" name="pm"> PM </label>
                            <button type="submit" class="btn btn-default text-center" style="margin-top: 10px;" id="currtime" name="currtime">使用当前时间</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>  <!-- end box -->
        </div>  <!-- end col-sm-6 -->
    </div>
    
        结果
    
    <div class="box">
        <div class="row">
            <div class="col-md-2">
                <div class="form-group">
                    <label> <a>时差</a>（分钟）：</label>
                    <input type="text" class="form-control" id="eqtbox" name="eqTime" readonly="">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label><a>太阳赤纬</a>（以°）：&nbsp;&nbsp;&nbsp;</label>
                    <input type="text" class="form-control" id="sdbox" name="solarDec" readonly="">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label><a>日出时间</a>（HH：MM）：</label>
                    <input type="text" class="form-control" id="risebox" name="sunrise" readonly="">
                    <label class="green"><input type="checkbox" id="showsr" name="srshow">显示日出</label>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label><a>正午时刻</a>（HH：MM：SS）：&nbsp;&nbsp;&nbsp; </label>
                    <input type="text" class="form-control" id="noonbox" name="solnoon" readonly="">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label><a>日落时间</a>（HH：MM）：</label>
                    <input type="text" class="form-control" id="setbox" name="sunset" readonly="">
                    <label class="red"><input type="checkbox" id="showss" name="ssshow">显示日落</label>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label><a>方位角/高度角</a>（以°）在当地时间：</label>
                    <div class="row">
                        <div class="col-xs-6" style="padding-right: 4px;">
                            <input type="text" class="form-control" id="azbox" name="az" readonly="" style="padding:6px 6px;">
                        </div>
                        <div class="col-xs-6" style="padding-left: 4px;">
                            <input type="text" class="form-control" id="elbox" name="el" readonly="" style="padding:6px 6px;">
                        </div>
                    </div>
                    <label class="yellow"><input type="checkbox" id="showae" name="aeshow">显示方位角</label>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script>
    /**
     * 获取单前时间
     */
    function currentTime() {
        // get current date and time
        var dateObj4 = new Date();
        var nowhour = dateObj4.getHours();
        var nowmins = dateObj4.getMinutes();
        var nowsecs = dateObj4.getSeconds();
        var thisYear = dateObj4.getYear();
        if(thisYear <=199){
            thisYear=(thisYear*1)+1900;
        }
        var thismonth = dateObj4.getMonth();
        var thisday = dateObj4.getDate();

        // set date boxes to current date and time
        $('#daybox').val(thisday);
        $('#mosbox').val(monthList[thismonth].abbr);
        $('#hrbox').val(zeroPad(nowhour,2));
        $('#mnbox').val(zeroPad(nowmins,2));
        $('#scbox').val(zeroPad(nowsecs,2));
        $('#yearbox').val(thisYear);
    }

    function inputsChanged(){
        calculate();
    }

    $(document).ready(function() {
        // hidden
        $('#showsr').click(function(){ inputsChanged(); });
        $('#showss').click(function(){ inputsChanged(); });
        $('#showae').click(function(){ inputsChanged(); });
        $('#showsr').parent('label').hide();
        $('#showss').parent('label').hide();
        $('#showae').parent('label').hide();

        // set up event handlers on input boxes
        $('#daybox').change(function(){ inputsChanged(); });
        $('#mosbox').change(function(){ inputsChanged(); });
        $('#yearbox').change(function(){ inputsChanged(); });
        $('#hrbox').change(function(){ inputsChanged(); });
        $('#mnbox').change(function(){ inputsChanged(); });
        $('#scbox').change(function(){ inputsChanged(); });
        $('#zonebox').change(function(){ inputsChanged(); });
        $('#latbox').change(function(){ inputsChanged(); });
        $('#lngbox').change(function(){ inputsChanged(); });
        $('#inputZeroAzimuth').change(function(){ inputsChanged(); });
        $('#dstCheckbox').click(function(){ inputsChanged(); });
        $('#mkCookie').click(function(){ saveCookie(); });
        $('#pmbox').click(function(){ inputsChanged(); });
        $('#currtime').click(function(){ currentTime(); inputsChanged(); });

        currentTime();

        // get saved location cookie if available,
        // and set location inputs
        var cookee = GetCookie("lat");
        var lat = (cookee) ? cookee : "30.214512";
        $('#latbox').val(lat);
        cookee = GetCookie("lng");
        var lon = (cookee) ? cookee : "120.225365";
        $('#lngbox').val(lon);
        cookee = GetCookie("gmt");
        var gmt = (cookee) ? cookee : "8";
        $('#zonebox').val(gmt);
        cookee = GetCookie("inputZeroAzimuth");
        var inputZeroAzimuth = (cookee) ? cookee : "0";
        $('#inputZeroAzimuth').val(inputZeroAzimuth);
        // do calculations on default location and date
        calculate();

    });

</script>
</html>